import React, { useState, useEffect } from 'react';
import { Select, Radio, Space } from 'antd';
import type { RadioChangeEvent } from 'antd';
import { useTranslation } from 'react-i18next';
import { useCardCollect } from '../Context/CardCollectContext';
import VariableTab from './VariableTab';
import './styles/index.less';

interface VariableOptionProps {
	parameterName?: string;
	index?: number;
	onVariableChange?: (value: string, index: number) => void;
	cardType?: string;
}

const VariableOption = (props: VariableOptionProps) => {
	const { t } = useTranslation();
	const { onVariableChange, index, parameterName = '', cardType } = props;
	const { variableList, roles } = useCardCollect();
	const [variable, setVariable] = useState(0); // 变量id
	const [variableOptions, setVariableOptions] = useState(); // 变量列表
	const [selectValue, setSelectValue] = useState(t('not-binding')); // 显示值
	const [curRole, setCurRole] = useState(''); // 当前角色

	useEffect(() => {
		updateOptions();
	}, []);

	useEffect(() => {
		setSelectValue(t('not-binding'))
		setVariable(0);
	}, [cardType])

	const onChange = (e: RadioChangeEvent) => {
		setVariable(e.target.value);
		const item = variableList().find(item => item.id == e.target.value);
		// {{客户信息_访客_客户ID_1376}}
		const label = `客户信息-${curRole}-${item?.name}-${item.id}`;
		setSelectValue(`客户信息-${curRole}-${item?.name}`);
		onVariableChange && onVariableChange(label, index || 0);
	};

	const onDropdownVisibleChange = (open: boolean) => {
		if (open && parameterName) {
			updateOptions();
		}
	};

	const handleRoleChange = (roleId: number) => {
		const list = variableList().filter((item: any) => item.roleId === roleId);
		const options: any = list.map((item: any) => {
			return { label: item.name, value: item.id };
		});
		setVariableOptions(options);

		const role = roles().find((item: any) => item.value === roleId);
		setCurRole(role?.label);
	};

	const updateOptions = () => {
		if (parameterName) {
			const [type, role, variableName, id] = parameterName.split('-');
			setCurRole(role);
			setSelectValue(`${type}-${role}-${variableName}`);
			const list = variableList().filter((item: any) => item.roleName === role);
			const options: any = list.map((item: any) => {
				return { label: item.name, value: item.id };
			});
			setVariableOptions(options);
			setVariable(Number(id));
		} else if (roles().length > 0) {
			const roleId = roles()[0].value;
			const list = variableList().filter((item: any) => item.roleId === roleId);
			const options: any = list.map((item: any) => {
				return { label: item.name, value: item.id };
			});
			setVariableOptions(options);
			const role = roles().find((item: any) => item.value === roleId);
			setCurRole(role?.label);
			setSelectValue(t('not-binding') || '');
			setVariable(0);
		}
	};

	return (
		<Select
			style={{ width: 300 }}
			placeholder={t('not-binding')}
			allowClear={true}
			popupClassName="variable-option-popup"
			value={selectValue}
			onClear={() => {
				setSelectValue(t('not-binding') || '');
				onVariableChange && onVariableChange('', index || 0);
				setVariable(0);
			}}
			notFoundContent={
				<>
					<VariableTab parameterName={parameterName} onRoleChange={handleRoleChange} />
					{variableList().length && <Radio.Group onChange={onChange} value={variable} options={variableOptions} />}
				</>
			}
			onDropdownVisibleChange={onDropdownVisibleChange}
		></Select>
	);
};

export default VariableOption;
